<template>
  <div>
        <div class="box" :class="{'box-bg':visible}"></div>
        <mybut @click="visible=!visible">点击按钮改变大小与颜色</mybut>
  </div>
</template>

<script>
import mybut from '../lesson9/mybut.vue'
export default {
  components: { mybut },
  data(){
      return{
          visible:false
      }
  },
   methods: {
   },
}
</script>

<style scoped>
.box{
    width: 200px;
    height: 200px;
    margin: 20px;
    background: red;
    transition: all 1s;
}
.box-bg{
    background: green;
    width: 400px;
    height: 300px;
}
.box:hover{
    background: blue;
    width: 400px;
    transform: scale(2,3) translate(-100px,50px);
}
</style>